<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 生命周期</title>
  <script src="./vue.js"></script>
</head>
<body>
  <pre>
    1. 学习生命周期的意义：有助于理解 Vue 实例的运行方式、完成更复杂的功能、分析错误原因等

    2. 实例的生命周期：Vue 实例从被创建到挂载到页面中运行，再到不用时卸载、销毁的过程
    
    3. 钩子函数： 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数，这些方法是 Vue 给提供的

    4. Vue 生命周期经过 3 个阶段： 创建、更新、销毁
  </pre>

  <div id="root">
    <div class="box">
      <h5>{{ msg }}</h5>
    </div>
  </div>
  <!-- Vue 生命周期分为三个阶段：创建阶段、运行阶段、销毁阶段 -->

  <script>
    // 1. new Vue 开始创建 Vue 实例
    var vm = new Vue({
      el: '#root',
      data: {
        msg: "Tom"
      },
      methods: {
        handle () {
          console.log('Jerry')
        }
      },
      beforeCreate() {
        // 在这个阶段，创建了一个空的 Vue 实例对象，这时候，只有钩子函数、以及默认的方法能够被调用
        // 注意：在这个阶段，是不能够访问 data 中的数据，以及自定义时间
        // console.log(this.msg)
        // this.handle()
      },
      created() {
        // ★★★★★
        // 在这个阶段，data 以及 methods 中的方法以及被初始化完成，这时候可以进行调用
        // 注意：在实际开发中，如果想最早的获取到后台返回的数据，也就是调用 ajax ，最早就应该在 created
        // console.log(this.msg)
        // this.handle()
      },
      beforeMount() {
        // 只需要知道，在这个阶段，Vue 在编译、解析模板即可
        // 在这个阶段， Vue 开始对模板进行编译，进行解析，将 数据 和 模板中使用的位置开始进行连接，
        // 在内存中生成一个模板字符串，生成一个 DOM 结构，但是需要注意： 是在内存中生成的，还没有渲染到浏览器中
        console.log(document.querySelector('h5'))
      },
      mounted() {
        //  ★★★★★
        // 到这个阶段，就已经把内存中生成的 DOM 替换到页面中，这时候就可以进行 DOM 操作
        // 操作 DOM 最早的位置就是在 mounted 中
        // 到这个阶段，Vue 创建阶段就已经完成了，到这个阶段， Vue 模板全部解析完毕，数据 和 模板完成结合，生成页面
        console.log(document.querySelector('h5'))
      },
      beforeUpdate() {},
      updated() {},
    })
  </script>
  
</body>
</html>